<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    background-color="#304156"
    text-color="#fff"
    active-text-color="#409EFF"
    router
  >
    <component
      v-for="item in menuList"
      :is="SidebarItem"
      :item="item"
      :key="item.path"
    />
  </el-menu>
</template>

<script setup>
import { ref, defineComponent, h } from 'vue'
// 递归子菜单组件
const SidebarItem = defineComponent({
  name: 'SidebarItem',
  props: {
    item: { type: Object, required: true }
  },
  setup(props) {
    // 递归渲染时用h函数，避免JSX类型报错
    return () => {
      if (props.item.children) {
        return h(
          'el-sub-menu',
          { index: props.item.path },
          {
            title: () => [
              h('i', { class: props.item.icon }),
              h('span', props.item.title)
            ],
            default: () =>
              (props.item.children || []).map(child =>
                h(SidebarItem, { item: child, key: child.path })
              )
          }
        )
      }
      return h(
        'el-menu-item',
        { index: props.item.path },
        [
          h('i', { class: props.item.icon }),
          h('span', props.item.title)
        ]
      )
    }
  }
})

const activeMenu = ref('/dashboard')
const menuList = ref([
  {
    title: '首页',
    path: '/dashboard',
    icon: 'el-icon-s-home'
  },
  {
    title: '文档',
    path: '/docs',
    icon: 'el-icon-document'
  },
  {
    title: '引导页',
    path: '/guide',
    icon: 'el-icon-guide'
  },
  {
    title: '权限测试页',
    path: '/permission',
    icon: 'el-icon-lock',
    children: [
      {
        title: '用户管理',
        path: '/permission/user',
        icon: 'el-icon-user'
      },
      {
        title: '角色管理',
        path: '/permission/role',
        icon: 'el-icon-s-custom'
      },
      {
        title: '菜单管理',
        path: '/permission/menu',
        icon: 'el-icon-menu'
      }
    ]
  },
  {
    title: '图标',
    path: '/icons',
    icon: 'el-icon-picture-outline'
  },
  {
    title: '组件',
    path: '/components',
    icon: 'el-icon-cpu',
    children: [
      {
        title: '富文本编辑器',
        path: '/components/editor',
        icon: 'el-icon-edit-outline'
      },
      {
        title: 'Markdown',
        path: '/components/markdown',
        icon: 'el-icon-document-copy'
      },
      {
        title: '拖拽列表',
        path: '/components/draggable',
        icon: 'el-icon-rank'
      }
    ]
  },
  {
    title: '图表',
    path: '/charts',
    icon: 'el-icon-data-analysis',
    children: [
      {
        title: '折线图',
        path: '/charts/line',
        icon: 'el-icon-trend-charts'
      },
      {
        title: '柱状图',
        path: '/charts/bar',
        icon: 'el-icon-s-data'
      },
      {
        title: '饼图',
        path: '/charts/pie',
        icon: 'el-icon-pie-chart'
      }
    ]
  },
  {
    title: '路由嵌套',
    path: '/nested',
    icon: 'el-icon-menu',
    children: [
      {
        title: '菜单1',
        path: '/nested/menu1',
        icon: 'el-icon-menu',
        children: [
          {
            title: '菜单1-1',
            path: '/nested/menu1/menu1-1',
            icon: 'el-icon-menu'
          },
          {
            title: '菜单1-2',
            path: '/nested/menu1/menu1-2',
            icon: 'el-icon-menu',
            children: [
              {
                title: '菜单1-2-1',
                path: '/nested/menu1/menu1-2/menu1-2-1',
                icon: 'el-icon-menu'
              }
            ]
          }
        ]
      },
      {
        title: '菜单2',
        path: '/nested/menu2',
        icon: 'el-icon-menu'
      }
    ]
  },
  {
    title: 'Table',
    path: '/table',
    icon: 'el-icon-table',
    children: [
      {
        title: '基础表格',
        path: '/table/basic',
        icon: 'el-icon-s-grid'
      },
      {
        title: '复杂表格',
        path: '/table/complex',
        icon: 'el-icon-s-operation'
      }
    ]
  },
  {
    title: '综合实例',
    path: '/example',
    icon: 'el-icon-suitcase',
    children: [
      {
        title: '树形控件',
        path: '/example/tree',
        icon: 'el-icon-share'
      },
      {
        title: 'Tab页',
        path: '/example/tabs',
        icon: 'el-icon-notebook-2'
      }
    ]
  }
])
</script>

<style scoped>
.el-menu-vertical-demo {
  width: 200px;
  min-height: 100vh;
}
</style>

